 <template>
  <div>
    <!-- 报名人员 -->
    <tTable :columns="columns" :data="personList">
      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button
          v-if="slotProps.scope.row.logistics"
          type="warning"
          size="mini"
          @click="changeLogistics(slotProps.scope.row)"
        >设置物流单号</el-button>
        <el-button
          v-if="slotProps.scope.row.logistics"
          class="add-style"
          type="primary"
          size="mini"
          @click="showDetail(slotProps.scope)"
        >收货信息</el-button>
      </template>
    </tTable>

    <Pagination :total="personTotal" @handleChange="handlePersonChange"/>

    <el-dialog title="收货详细信息" :visible.sync="dialogVisible" width="40%">
      <div class="detail-container" v-if="personList && personList[currentUserIndex]">
        <div>
          <label for>收货人：</label>
          <span>{{personList[currentUserIndex].receiveName}}</span>
        </div>
        <div>
          <label for>联系方式：</label>
          <span>{{personList[currentUserIndex].receivePhone}}</span>
        </div>
        <div>
          <label for>收货地区：</label>
          <span>{{personList[currentUserIndex].region}}</span>
        </div>
        <div>
          <label for>详细地址：</label>
          <span>{{personList[currentUserIndex].detail}}</span>
        </div>
        <div>
          <label for>备注：</label>
          <span>{{personList[currentUserIndex].message}}</span>
        </div>

        <hr>

        <div>
          <label for>是否发货：</label>
          <span>{{personList[currentUserIndex].logisticsStatus}}</span>
        </div>

        <div>
          <label for>物流单号：</label>
          <span>{{personList[currentUserIndex].logisticsNumber}}</span>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="add-style" type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { formatDateTime } from "src/util/time.js";
import {
  getAllVideo,
  deleteVideo,
  getProductAllVideo,
  setLogistics
} from "api/activate";

import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";

export default {
  filters: {
    logisticsStatus(status) {
      const statusMap = {
        未发货: "warning",
        已发货: "success"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      personList: [],
      currentId: "", // 当前商品id
      dialogVisible: false,
      currentUserIndex: 0,

      total: -1,
      personTotal: 0, // 报名人员总数
      booleanTrue: true,

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "name", label: "名称" }
        },
        {
          attr: { prop: "phone", label: "联系电话" }
        },
        {
          attr: { prop: "number", label: "购买数量" }
        },
        {
          attr: { prop: "createTime", label: "购买时间" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "280" }
        }
      ]
    };
  },
  components: { Pagination, tTable },
  mounted() {
    this.currentId = this.$route.params.id;
    this.getData(1);
  },
  methods: {
    getData: function(pageNumber) {
      getProductAllVideo(this.currentId, 1).then(res => {
        this.personList = res.content.map(i => {
          i.createTime = formatDateTime(i.createTime);
          return i;
        });
        this.personTotal = res.totalElements;
      });
    },
    showDetail: function(scope) {
      this.currentUserIndex = scope.$index;
      this.dialogVisible = true;
    },
    handlePersonChange: function(pageNumber) {
      this.getData(pageNumber);
    },
    changeLogistics: function(item) {
      this.$prompt("请填写物流单号", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(
        data => {
          if (!data.value) return;
          setLogistics(item.id, data.value).then(res => {
            this.$message.success("设置成功");
            this.getData(1);
          });
        },
        () => {}
      );
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.detail-container > div {
  margin-top: 10px;
}

.detail-container > div > label {
  color: #999;
}
</style>
